<!DOCTYPE html>
<html>
	<head>
		<title>烟草种子发芽检测与计数</title>
		{% load static %}
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="shortcut icon" href="{% static 'img/seed.ico'%}" type="image/x-icon" />

		<link rel="stylesheet" href="{% static 'css/bootstrap.min.css'%}">
		<link rel="stylesheet" href="{% static 'icon/font/bootstrap-icons.min.css'%}" />

		<link href="{% static 'css/fileinput.css'%}" media="all" rel="stylesheet" type="text/css" />
		<link href="{% static 'css/all.css'%}" rel="stylesheet" type="text/css" />

		<script src="{% static 'js/jquery-3.6.0.min.js'%}"></script>
		<script src="{% static 'js/bootstrap.bundle.min.js'%}"></script>
		<script src="{% static 'js/plugins/buffer.min.js'%}"></script>
		<script src="{% static 'js/plugins/filetype.min.js'%}"></script>
		<script src="{% static 'js/fileinput.js'%}"></script>

		<script src="{% static 'themes/fa5/theme.js'%}"></script>
		<script src="{% static 'js/axios.min.js' %}"></script>

		<style>
			.custom-file-input~.custom-file-label::after {
				content: "选择图片";
			}

			.custom-control-input:checked~.custom-control-label::before {
				background-color: #28a745;
				border-color: #28a745;
			}

			.floatBox {
				position: absolute;
				box-sizing: content-box;
				display: block;
				border: 3px solid black;
				opacity: 35%;
				background-color: burlywood;
				z-index: 150;
			}

			.floatBox:hover {
				opacity: 40%;
				background-color: blue;
				border-width: 4px dashed;
			}

			.myCenterText {
				padding-left: 4px !important;
				padding-right: 4px !important;
			}

			.input-group {
				flex-wrap: nowrap;
			}

			nav.navbar {
				padding-left: 0px;
			}

			#pending-pa {
				display: inline-flex;
				align-items: center;
				position: relative;
				top: 10px
			}
		</style>
	</head>
	<body>

		<div class="container">
			<!--	<h4>烟草种子发芽图片检测</h4>-->
			<nav class="navbar navbar-expand-sm bg-light">
				<ul class="nav nav-tabs" role="tablist">
					<li class="nav-item" role="presentation">
						<a role="tab" class="nav-link font-weight-bold" data-toggle="tab" href="#home"
							id="a_home">上传图片</a>
					</li>
					<li class="nav-item" role="presentation">
						<a role="tab" class="nav-link font-weight-bold" data-toggle="tab" href="#detect"
							id="a_detect">检测结果</a>
					</li>
					<li class="nav-item" role="presentation">
						<a role="tab" class="nav-link font-weight-bold" data-toggle="tab" href="#custom"
							id="a_custom">整体统计</a>
					</li>
				</ul>
			</nav>

			<!-- Tab panes -->
			<div class="tab-content mb-2">
				<div id="home" class="tab-pane active" role="tabpanel"><br>
					<div id="main" class="main">
						<form id="upload" enctype="multipart/form-data">
							{% csrf_token %}
							<div class="form-group">
								<div class="file-loading">
									<label>Preview File Icon</label>
									<input id="file-3" type="file" multiple class="file" name="fileBlob"
										accept=".png, .jpg, .gif, jpeg, .tif" />
								</div>
								<div class="custom-control custom-switch ml-2" id="isPhoneCap"
									style="display:inline-flex;align-items:center;">
									<input type="checkbox" class="custom-control-input" id="chkPhoneCap">
									<label class="custom-control-label" for="chkPhoneCap">手机拍照</label>
								</div>

								<button type="button" id="detectSeeds" class="btn btn-success ml-2">种子检测</button>
								<div id="pending-pa">
									<div id="pending" class="ml-2" style="display:none;">
										<div class="spinner-border text-primary"></div>
										检测种子中...
									</div>
								</div>
							</div>
						</form>

						<div id="choseAction" style="display:block;">
							<input name="action" value="form" type="radio" />form
							<input name="action" value="ajax" type="radio" checked="checked" />ajax
							<input name="action" value="test" type="radio" />test
						</div>
						<div class="alert alert-success alert-dismissible">
							<button type="button" class="close" data-dismiss="alert">&times;</button>
							<strong>提示：</strong>上传图片的最大的边长要确保在<span style="color:red">3400~5000</span>像素之间，以保证足够的准确率。
						</div>
					</div>
				</div>

				<div id="detect" class="tab-pane fade" role="tabpanel"><br>
					<div class="main" id="result">
						<form>
							<div class="mb-1">
								<span id="msgResult">检测结果：</span>

								<div class="custom-control  custom-switch ml-2" style="display:inline-block;">
									<input type="checkbox" class="custom-control-input" id="labelNumber">
									<label class="custom-control-label" for="labelNumber">种子序号</label>
								</div>
								<div class="custom-control  custom-switch ml-2" style="display:inline-block;">
									<input type="checkbox" class="custom-control-input" id="labelShow">
									<label class="custom-control-label" for="labelShow">检测框</label>
								</div>

								<nav id="showPages" class="mt-1" style="display: none;">
									<ul class="pagination" style="display:inline-flex">
										<li class="page-item"><a class="page-link" href="#">上一张</a></li>
										<li class="page-item active" data="my"><a class="page-link" href="#">1</a></li>
										<li class="page-item" data="my"><a class="page-link" href="#">2</a></li>
										<li class="page-item" data="my"><a class="page-link" href="#">3</a></li>
										<li class="page-item" data="my"><a class="page-link" href="#">4</a></li>
										<li class="page-item" data="my"><a class="page-link" href="#">5</a></li>
										<li class="page-item" data="my"><a class="page-link" href="#">6</a></li>
										<li class="page-item" data="my"><a class="page-link" href="#">7</a></li>
										<li class="page-item"><a class="page-link" href="#">下一张</a></li>
									</ul>
									<span id="file_detect_name" class="ml-2 font-weight-bold text-primary"></span>
								</nav>

								<button type="button" id="drawRect" class="btn btn-primary" style="display: none;">画出检测框
								</button>
							</div>
							<div class="input-group">
								<div class="input-group-prepend">
									<span class="input-group-text">发芽种子数量</span>
								</div>
								<input type="number" id="health" value="0"
									class="myCenterText form-control col-md-4 col-sm-6" min="0" step="1" />
							</div>
							<div class="input-group" style="display:none;">
								<div class="input-group-prepend">
									<span class="input-group-text">单叶种子数量</span>
								</div>
								<input type="number" min="0" step="1" id="oneleaf" value="0"
									class="myCenterText form-control col-md-4 col-sm-6" />
							</div>
							<div class="input-group">
								<div class="input-group-prepend">
									<span class="input-group-text">　不确定数量</span>
								</div>
								<input type="number" min="0" step="1" id="partial" value="0"
									class="myCenterText form-control col-md-4 col-sm-6" />
							</div>
							<div class="input-group" style="display:none;">
								<div class="input-group-prepend">
									<span class="input-group-text">检测种子总数量</span>
								</div>
								<input type="number" min="0" step="1" id="seeds" value="0"
									class="myCenterText form-control col-md-4 col-sm-6" disabled />
							</div>
							<p><img src="" class="img-fluid" id="showImg" style="display:none;" /></p>
						</form>
						<textarea id="copy_data" style="opacity: 0;position: absolute;"></textarea>

						<div class="alert alert-info alert-dismissible" style="display: none;" id="alertServer">
							<button type="button" class="close" data-dismiss="alert">&times;</button>
							<strong>注意：</strong>服务器正在维护中，目前只能对预设检测结果进行操作。
						</div>
						<div class="alert alert-success alert-dismissible" style="display: none;" id="alertShow">
							<button type="button" class="close" data-dismiss="alert">&times;</button>
							<strong>提示：</strong>长按下方检测框，选中框后再点击一次，可修改结果。
						</div>


						<div id="boxesDiv" style="position:relative;border:0px solid black;padding:0px;"
							class="clearfix">
							<canvas id="show" class="img-fluid"
								style="position:absolute;top:0px;left:0px;z-index:0;"></canvas>
							<canvas id="showBox" class="img-fluid"
								style="position:absolute;top:0px;left:0px;z-index:100;"></canvas>

							<div class="dropdown-menu" id="menu" style="z-index:200;">
								<a class="dropdown-item" href="javascript:void(0)">设置为发芽种子</a>
								<a class="dropdown-item" href="javascript:void(0)" style="display:none;">设置为单叶种子</a>
								<a class="dropdown-item" href="javascript:void(0)">设置为不确定</a>
								<a class="dropdown-item" href="javascript:void(0)">设置为不是种子</a>
								<a class="dropdown-item" href="javascript:void(0)" style="color:blue;">不做修改，退出菜单</a>
							</div>
						</div>
					</div>
					<div style="display: none;" id="saveImages">利用img保存上传检测的图片，现在没用了</div>
				</div>

				<div id="custom" class="container tab-pane fade" role="tabpanel"><br>
					<div class="main" id="table">
						<table id="datalist" class="table table-striped table-bordered" width="100%">
							<thead>
								<tr>
									<th>序号</th>
									<th>文件名称</th>
									<th>发芽种子数量</th>
									<th>发芽率(%)</th>
								</tr>
							</thead>
							<tfoot>
								<tr>
									<th colspan="2" style="text-align:right">结果:</th>
									<th></th>
									<th></th>
								</tr>
							</tfoot>
						</table>
					</div>
					<button type="button" id="btn_copy" class="btn btn-primary" style="display:none">数据复制</button>
				</div>
			</div>
		</div>



		<script src="{% static 'business/first.js' %}"></script>
		<script src="{% static 'business/second.js' %}"></script>
		<script src="{% static 'business/third.js' %}"></script>
		<script src="{% static 'business/fourth.js' %}"></script>

		<script src="{% static 'js/bootstrap-input-spinner.js' %}"></script>
		<script src="{% static 'js/bootbox.min.js' %}"></script>
		<script src="{% static 'js/showinput.js' %}"></script>

		<script>
			$(function() {
				$('#a_home').tab('show');
				$("input[type='number']").inputSpinner();
				//* 设置右侧数字
				$("#result input[inputmode='decimal']").each(function(index, dom) {
					dom.style.paddingLeft = "4 px !important";
					dom.style.paddingRight = "4 px !important";

					let div = document.createElement('div');
					div.className = "input-group-prepend";

					let span = document.createElement('span');
					span.className = 'font-weight-bold input-group-text';
					span.style.backgroundColor = 'white';
					span.style.minWidth = '3rem';
					span.style.textAlign = 'right';
					span.innerText = '0';
					if (index == 0)
						span.style.color = 'red';
					else if (index == 1)
						span.style.color = 'blue';
					else
						span.style.color = 'black';

					div.appendChild(span)
					dom.parentNode.appendChild(div);
				});
			})
		</script>

		<link rel="stylesheet" href="{% static 'css/datatables.min.css'%}" />
		<script src="{% static 'js/dataTables.min.js'%}"></script>
		<script src="{% static 'business/fifth.js' %}"></script>
	</body>

</html>
